﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>饼图</title>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="js/esl.js"></script>
</head>

<body onload="refreshView()">
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:200px;border:0px solid #ccc;padding:10px;"></div>
    
    <script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths:{ 
            'echarts':'./js/echarts',
            'echarts/chart/bar' : './js/echarts',
            'echarts/chart/line': './js/echarts',
            'echarts/chart/map' : './js/echarts'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    var myChart;
    
    
    //刷新数据部分
    function refreshView()
    {
    	var option = {
        		tooltip : {
        	        show:false
        	    },           
        	    toolbox: {
        	        show : false,
        	        feature : {
        	            mark : false,
        	            dataView : {readOnly: false},
        	            restore : false,
        	            saveAsImage : false
        	        }
        	    },
        	    calculable : false,
        	    color :['#FFCB02','#FFF200','#E7E62F','#ABD039','#4CBEA1','#54C5D2','#0098D9','#F57374'],
        	    series : [
        	        {
        	            name:'数据套餐',
        	            type:'pie',
        	            radius : '80%',
        	            center: ['50%', '50%'],
        	            itemStyle : {
        	                normal : {
        	                    label : {
        	                        show : false
        	                    },
        	                    labelLine : {
        	                        show : false
        	                    }
        	                }            	      
       	           	 	},
        	            data:[
        	                {value:10, name:'10M'},
        	                {value:30, name:'30M'},
        	                {value:70, name:'70M'},
        	                {value:150, name:'150M'},
        	                {value:280, name:'280M'},
        	                {value:500, name:'500M'},
        	                {value:2048, name:'2G'},
        	                {value:5120, name:'5G'}
        	            ]
        	        }
        	    ]	
        };
    	
    	require(
    	        [
    	            'echarts',
    	            'echarts/chart/pie'
    	        ],
    	        function(ec) {
    	            //--- 折柱 ---
    	            myChart = ec.init(document.getElementById('main'));
    	            myChart.setOption(option);
    	            var ecConfig = require('echarts/config');
    	            myChart.on(ecConfig.EVENT.CLICK, function(param){
    	    	        //刷新动态图标 --获取dataIndex,调用java对外开放接口
    	    	        //调用刷新库表部分
    	    	        window.SurveyUtil.getCheckDetail(param.dataIndex);
    	        	});
    	        }
    	    );  
    };
    </script>
</body>
</html>